<template>
  <div class="container">
    <a-card style="height:calc(100vh - 105px)">
      <div style="display: flex;justify-content: space-between;">
        <a-row style="min-height: 0.9rem; font-size: 0.4rem; margin-bottom: 15px">
          <a-col :span="0">
            <a-icon type="search"></a-icon>
          </a-col>
          <a-col :span="24">
            <a-input-search placeholder="搜索" enter-button v-model:value="searchName" @search="onSearch" />
          </a-col>
        </a-row>
        <div class="action_group">
          <a-button type="primary" @click="showModal()">添加</a-button>
        </div>
      </div>

      <a-table :loading="loading" bordered :columns="columns" :data-source="data" :pagination="false">
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.dataIndex === 'action'">
            <span style="color: #1890ff;cursor: pointer;" @click="showEditModal(record.key)">编辑</span>
            <span style="margin: 0 20px;opacity: .3;">|</span>
            <span style="color: red;cursor: pointer;" @click="handleDelete(record)">删除</span>
          </template>
        </template>
      </a-table>
      <div style="position: absolute;bottom: 25px;right: 25px;">
        <a-pagination v-model:current="current" @change="handlePagination" :total="pageTotal" :hideOnSinglePage="true"
          style="float: right;" />
        <span v-if="pageTotal > 10"
          style="float: right;font-size: 16px;line-height: 32px;margin-right: 25px;color: rgb(65, 65, 65);">共{{
            pageTotal }}条数据</span>
      </div>
      <modal ref="refmodal" @add="getUser" style="display: none;"></modal>
      <editModal ref="refeditModal" @edit="getUser" style="display: none;"></editModal>
    </a-card>

  </div>
</template>

<script setup>
import { ref, createVNode, onMounted } from "vue";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { getUserList, deleteUser, getUserCenterInfo } from '@api/user.js'
import modal from "@views/user/modal.vue";
import editModal from "@views/user/editModal.vue";

let loading = ref(false)
const router = useRouter();
const selected = ref([]);
const userList = ref([])
const searchName = ref('')
const pageTotal = ref()
const current = ref(1)
const pagesize = ref(10)
const refmodal = ref(null)
const refeditModal = ref(null)
function showModal() {
  refmodal.value.formState.username = ""
  refmodal.value.formState.user_name = ""
  refmodal.value.formState.password = ""
  refmodal.value.formState.email = ""
  refmodal.value.formState.mobile = ""
  refmodal.value.visible = true
}
function showEditModal(id) {
  refeditModal.value.visible = true
  refeditModal.value.userId = id
}
function handlePagination(page, pageSize) {
  console.log(page, pageSize)
  current.value = page
  pagesize.value = pageSize
  loading.value = true
  getUser()
  loading.value = false
}
const columns = [
  {
    title: "序号",
    width: '50px',
    align: 'center',
    dataIndex: "index",
  },
  {
    title: "用户名",
    width: '150px',
    align: 'center',
    dataIndex: "username",
  },
  {
    title: "昵称",
    width: '150px',
    align: 'center',
    dataIndex: "user_name",
  },
  {
    title: "邮箱",
    width: '150px',
    align: 'center',
    dataIndex: "email",
  },
  {
    title: "电话",
    width: '150px',
    align: 'center',
    dataIndex: "mobile",
  },
  {
    title: "最近登录",
    width: '150px',
    align: 'center',
    dataIndex: "last_login",
  },
  {
    title: "操作",
    width: '150px',
    align: 'center',
    dataIndex: "action",
  },
];
const data = ref([]);
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    selected.value = selectedRows;
    console.log(selectedRows)
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === "Disabled User",
    name: record.name,
  }),
};
function handleDelete(record) {
  console.log(record.key)
  Modal.confirm({
    title: "确定删除？",
    icon: createVNode(ExclamationCircleOutlined),
    okText: "确定",
    cancelText: "取消",
    async onOk() {
      await deleteUser(record.key)
      message.success('删除成功')
      await getUser()
    },
    onCancel() {
      console.log("点击取消");
    },
  });
}
function handleEdit(record) {
  getUserCenterInfo().then(res => {
    router.push({ name: "userEdit", query: { id: record.key } });
  })
}
function onSearch() {
  getUser()
}
function getUser() {
  loading.value = true
  data.value = []
  getUserList({ page: current.value, limit: pagesize.value, search: searchName.value }).then(res => {
    pageTotal.value = res.data.count
    userList.value = res.data.results
    // 添加数据
    userList.value.forEach((v, i) => {
      data.value.push({
        key: v.id,
        index: (current.value - 1) * pagesize.value + i + 1,
        username: v.username,
        user_name: v.user_name,
        email: v.email,
        mobile: v.mobile,
        last_login: v.last_login
      })
    })
  })
  loading.value = false
}
onMounted(async () => {
  getUser()
})
</script>

<style lang="less" scoped>
.container {
  height: calc(100vh - 65px);
  padding: 20px;

  .action_btn {
    margin-right: 15px;
  }

  ::v-deep .ant-table {
    height: calc(100vh - 250px);
    overflow: auto;
  }
}
</style>
